/*
 * @Author: Wxx
 * @Date: 2022-02-21 17:24:23
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-21 17:39:55
 * @Description:
 */
import React, { Component } from "react";
import axios from "axios";

class FilmList extends Component {
  state = {
    type: 1,
    list: [],
  };
  componentDidMount() {
    if (this.props.type === 1) {
      axios({
        url: "https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=4559557",
        headers: {
          "X-Host": "mall.film-ticket.film.list",
          "X-Requested-With": "XMLHttpRequest",
        },
      }).then((res) => {
        this.setState({
          list: res.data.data.films,
        });
      });
    } else {
      axios({
        url: "https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=2&k=6860107",
        headers: {
          "X-Host": "mall.film-ticket.film.list",
          "X-Requested-With": "XMLHttpRequest",
        },
      }).then((res) => {
        this.setState({
          list: res.data.data.films,
        });
      });
    }
  }

  static getDerivedStateFromProps(nextProps, nextState) {
    return {
      type: nextProps.type,
    };
  }

  componentDidUpdate(prevProps, prevState) {
    if (this.state.type === prevState.type) {
      return;
    }
    if (this.state.type === 1) {
      axios({
        url: "https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=1&k=4559557",
        headers: {
          "X-Host": "mall.film-ticket.film.list",
          "X-Requested-With": "XMLHttpRequest",
        },
      }).then((res) => {
        this.setState({
          list: res.data.data.films,
        });
      });
    } else {
      axios({
        url: "https://m.maizuo.com/gateway?cityId=440100&pageNum=1&pageSize=10&type=2&k=6860107",
        headers: {
          "X-Host": "mall.film-ticket.film.list",
          "X-Requested-With": "XMLHttpRequest",
        },
      }).then((res) => {
        this.setState({
          list: res.data.data.films,
        });
      });
    }
  }

  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item) => (
            <li key={item.filmId}>{item.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default class App extends Component {
  state = {
    type: 1,
  };
  render() {
    return (
      <div>
        <button onClick={() => this.setState({ type: 1 })}>正在热映</button>
        <button onClick={() => this.setState({ type: 2 })}>即将上映</button>
        <FilmList type={this.state.type} />
      </div>
    );
  }
}
